.MapView {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.map {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;

  :global(.mapboxgl-control-container) {
    :global(.mapboxgl-ctrl) {
      :global(.mapboxgl-ctrl-zoom-out) {
        border-radius: 0;
      }

      :global(.mapbox-gl-draw_polygon) {
        border-radius: 0;
      }

      :global(.mapbox-gl-draw_point) {
        border-radius: 0;
      }
    }

    :global(.mapboxgl-ctrl):has(> :global(.mapboxgl-ctrl-logo)) {
      display: none !important;
    }
  }

  :global(.mapboxgl-ctrl-group) {
    background-color: transparent;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    button :not(:disabled):hover {
      background-color: #dddddda0;
    }

    :global(.mapboxgl-ctrl-zoom-in) {
      background-color: #fdfdfd60;
    }

    :global(.mapboxgl-ctrl-zoom-out) {
      background-color: #fdfdfd60;
      border-radius: 0 0 4px 4px !important;
      border-top: 1px solid #97979760;
    }

    :global(.mapboxgl-ctrl-compass) {
      margin-top: 4px;
      background-color: #fdfdfd60;
      width: 45px;
      height: 45px;
      border-radius: 50% !important;
      border: none;
    }
  }

  :global(.mapboxgl-ctrl-scale) {
    background-color: #fdfdfd21;
    color: rgba(255, 255, 255, 0.664);
  }

  canvas:focus-visible {
    border: none;
    outline: none;
    box-shadow: none;
    // filter: blur(5px);
  }
}